<!--
 * @Author: yang_jl@ecidi.com
 * @Date: 2020-03-09 09:42:23
 * @LastEditors: zhong_m
 * @LastEditTime: 2021-12-17 16:23:03
 * @Description: 岗位内角色
 -->
<template>
  <fks-dialog
    :visible.sync="show"
    width="960px"
    class="dialog-8vh"
    destroy-on-close
    :title="LANG.STM_ROLE"
    top="8vh"
    @open="open"
    @close="close"
  >
    <div slot="title">
      <i class="fks-icon-user" />
      {{ LANG.STM_ROLE }}
    </div>
    <div class="single-searchBox">
      <fks-input
        v-model="searchValue"
        :placeholder="LANG.ROLE_SEARCH_PLACEHOLDER"
        class="single-searchBox-item"
        clearable
        maxlength="50"
        style="margin-top: 2px;"
        @clear="getRoles"
        @keyup.enter.native="getRoles"
      >
        <fks-button
          slot="append"
          icon="fks-icon-search"
          @click="getRoles"
        />
      </fks-input>
    </div>
    <div>
      <fks-row
        type="flex"
        style="height: calc(100% - 84px);"
        :gutter="20"
      >
        <fks-col :span="18">
          <fks-table
            ref="table"
            :data="list"
            :row-key="getRowKeys"
            default-expand-all
            height="calc(92vh - 295px)"
            @row-click="rowClick"
            @selection-change="handleSelectionChange"
            @toggleAllSelection="toggleAllSelection"
          >
            <fks-table-column
              type="selection"
              :reserve-selection="true"
              align="center"
              width="50"
            />
            <fks-table-column
              prop="name"
              :label="LANG.NAME"
              align="left"
            />
            <fks-table-column
              prop="code"
              :label="LANG.CODE"
              align="left"
            />
            <fks-table-column
              prop="remark"
              :label="LANG.REMARK"
              align="left"
            />
          </fks-table>
          <fks-pagination
            style=" margin-top: 12px;text-align: right;"
            :page-sizes="[20, 50, 100]"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="currentChange"
            @size-change="sizeChange"
          />
        </fks-col>
        <fks-col
          :span="6"
          style="height: calc(92vh - 300px);"
        >
          <div class="card-header">
            <span>{{ multipleSelection.length }} </span>
            {{ LANG.CHOOSED }}
          </div>
          <div class="card-body">
            <div
              v-for="tag in multipleSelection"
              :key="tag.id"
              class="card-item"
            >
              <fks-tag
                effect="plain"
                closable
                :disable-transitions="true"
                @close="handleClose(tag)"
              >
                {{ tag.name || tag.content.name }}
              </fks-tag>
            </div>
          </div>
        </fks-col>
      </fks-row>
    </div>
    <div
      slot="footer"
      style="text-align: right;"
      class="roleButton"
    >
      <fks-button
        type="primary"
        :loading="roleLoading"
        icon="fks-icon-check"
        @click="submit"
      >
        <span style="margin-left: 4px;">{{ LANG.SAVE }}</span>
      </fks-button>
    </div>
  </fks-dialog>
</template>
<script>
import * as Auth from '../api'
import { AUTH_CONFIG } from '@/store/State/stateTypes'
import * as types from '@/store/Getter/getterTypes.js'
import { getAddData, getDeleteData } from '@/utils/array'
export default {
  name: 'RoleGroupEdit',
  props: {
    data: {
      default() {
        return {
          id: '',
          name: '',
          code: '',
          remark: '',
          authMap: {}
        }
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: this.visible,
      roleLoading: false,
      form: Object.assign({}, this.data),
      list: [],
      loading: true,
      currentPage: 1,
      pageSize: 20,
      searchValue: '',
      total: 0,
      rolesChecked: [],
      rolesRecord: [],
      multipleSelection: [],
      getRowKeys(row) {
        return row.id
      }
    }
  },
  computed: {
    //授权类型，true为分级
    isGradeAuth() {
      return this.$store.state[AUTH_CONFIG].isGradeAuth
    },
    portalId() {
      return this.$store.state.portal.id
    },
    type() {
      return this.$store.state.portal.type
    },
    multiPortal() {
      return this.$store.getters[types.MULTI_PORTAL]
    }
  },
  watch: {
    data() {
      this.form = Object.assign({}, this.data)
    },
    visible() {
      this.show = this.visible
    }
  },
  created() {},
  methods: {
    //点击表格回调
    rowClick(row) {
      this.$refs.table.toggleRowSelection(row, this.changeSelected(row))
    },
    //点击后修改选中状态
    changeSelected(row) {
      let w = true
      this.multipleSelection.forEach((item) => {
        if (item.id == row.id) {
          w = false
        }
      })
      return w
    },
    //取消已选的角色
    handleClose(tag) {
      let rows = []
      rows.push(this.multipleSelection[this.multipleSelection.indexOf(tag)])
      this.toggleAllSelection(rows)
    },
    //切换所有行的选中状态
    toggleAllSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.table.toggleRowSelection(row)
        })
      } else {
        this.$refs.table.clearSelection()
      }
    },
    //打开岗位内角色弹窗时获取所有角色列表
    open() {
      if (this.form.id) {
        this.getRoles()
      }
    },
    //关闭岗位内角色弹窗
    close() {
      this.show = false
      this.currentPage = 1
      this.searchValue = ''
      this.pageSize = 20
      this.multipleSelection = []
      this.rolesChecked = []
      this.rolesRecord = []
      this.$emit('update:visible', this.show)
    },
    // 设置回显的方法
    setSelectRow() {
      for (let i = 0; i < this.list.length; i++) {
        if (this.rolesRecord.indexOf(this.list[i].id) >= 0) {
          this.$refs.table.toggleRowSelection(this.list[i], true)
        }
      }
    },
    //页面切换方法
    currentChange(val) {
      this.currentPage = val
      this.getRoles()
    },
    //页面大小切换方法
    sizeChange(val) {
      this.pageSize = val
      this.getRoles()
    },
    //获取角色列表
    getRoles() {
      this.loading = true
      let params = {
        pageNo: this.searchValue ? 1 : this.currentPage,
        pageSize: this.pageSize,
        type: this.type,
        portalId: this.portalId,
        searchValue: this.searchValue
      }
      if (this.type === 1) {
        Object.assign(params, { isGeneral: false })
      }
      Auth.getRoles(params)
        .then((res) => {
          if (res.status) {
            this.list = res.data.list
            this.total = res.data.total
          }
          this.loading = false
          this.getRolesByGroup()
        })
        .catch(() => {
          this.loading = false
        })
    },
    /**
     * @description:获取岗位已配置角色
     * @return:
     */
    getRolesByGroup() {
      this.rolesRecord = []
      this.loading = true
      Auth.getRolesByGroup({
        relationId: this.form.id,
        portalId: this.portalId
      }).then((res) => {
        if (res.status && res.data) {
          for (let role of res.data) {
            this.rolesRecord.push(role.id)
          }
          this.setSelectRow()
        }
        this.loading = false
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //提交
    submit() {
      this.roleLoading = true
      if (this.multipleSelection) {
        this.roleChecked = []
        for (let role of this.multipleSelection) {
          this.rolesChecked.push(role.id)
        }
      }
      let authMap = {
        ROLE: {
          POST: getAddData(this.rolesChecked, this.rolesRecord),
          DELETE: getDeleteData(this.rolesChecked, this.rolesRecord)
        }
      }
      this.form.authMap = authMap
      Object.assign(
        this.form,
        { relationId: this.form.id },
        { portalId: this.portalId },
        { type: this.type }
      )
      Auth.saveRoleGroup(this.form)
        .then((res) => {
          if (res.status) {
            this.$message({
              message: this.LANG.SAVE_SUCCESS,
              type: 'success',
              duration: 3000
            })
            this.close()
          }
          this.roleLoading = false
        })
        .catch(() => {
          this.roleLoading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.single-searchBox-item {
  float: right;
  margin-bottom: 22px;
}

.card-header {
  height: 48px;
  padding-left: 10px;
  border: #eee solid 1px;
  line-height: 48px;
}

.card-body {
  height: calc(92vh - 335px);
  padding: 10px;
  border: #eee solid 1px;
  overflow: auto;
}

.card-item {
  margin-bottom: 10px;
}

.single-searchBox .single-searchBox-item {
  margin-right: 0 !important;
}

::v-deep .fks-dialog__body {
  padding-bottom: 0 !important;
}
</style>
